<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>我的账户</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/dayjs.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
  }

  #app {
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
    color: #fff;
    padding: 20px 16px;
  }
  [v-cloak] {
    display: none;
  }
  .bg-type1 {
    background: url(/mobile/img/pay-bg-1.png) no-repeat;
  }
  .bg-type3 {
    background: url(/mobile/img/pay-bg-2.png) no-repeat;
  }
  .list-item {
    padding: 16px;
    display: flex;
    border-radius: 10px;
    font-size: 0;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    background-size: cover;
    background-position: center;
  }
  .add-box {
    justify-content: center;
    padding: 22px 0;
    background: rgba(36, 22, 111 ,0.3);
  }
  .add-box span {
    font-size: 14px;
    margin-left: 5px;
    color: #fff;
  }
  .left {
    display: flex;
    align-items: center;
  }
  .account-info {
    margin-left: 10px;
  }
  .name {
    font-size: 16px;
  }
  .account {
    font-size: 14px;
    margin-top: 2px;
  }
  .delete-button {
    height: 100%;
    background: none;
    border: none;
    color: #fff;
  }
  .add-popup {
    background: #1E1E42;
  }
  .add-icon, 
  .custom-title {
    vertical-align: middle;
  }
  .custom-title {
    margin-left: 10px;
  }
  .van-popup {
    background: none;
  }

  .add-title {
    padding: 15px 0;
    text-align: center;
    font-size: 16px;
  }
  .van-cell {
    background: none;
    color: #fff;
    padding: 20px;
    align-items: center;
  }
  .van-cell--clickable:active {
    background: none;
  }
  .van-cell::after {
    border-bottom-color: #10122A;
  }

  </style>
</head>

<body>
  <div id="app">
    <div v-cloak v-for="(item, index) in list" :key="index" :class="['list-item', 'bg-type' + item.type]" @click="selectAccount(item, index)">
      <div class="left">
        <img class="icon" v-if="item.type === 1" src="/mobile/img/icon_alipay.png" width="38px" height="38px" alt="">
        <img class="icon" v-else src="/mobile/img/icon_bank.png" width="38px" height="38px" alt="">
        <div class="account-info">
          <div class="name">{{item.name}}</div>
          <div class="account">{{item.account}}</div>
        </div>
      </div>
      <img class="del-btn" src="/mobile/img/icon_4.png" width="24px" height="24px" alt="" @click.stop="delAccount(item, index)">
    </div>
    <div class="list-item add-box" @click="addCount(3)">
      <img class="del-btn" src="/mobile/img/icon_add.png" width="26px" height="26px" alt="">
      <span>添加账户</span>
    </div>
    <van-popup v-model="showDialog" round close-on-popstate :style="{width: '80%'}">
      <div class="add-popup">
        <div class="add-title">添加提现账户</div>
        <van-cell title="支付宝" is-link @click="addCount(1)">
          <template #title>
            <img class="add-icon" src="/mobile/img/icon_2.png" width="34px" height="34px" alt="">
            <span class="custom-title">支付宝</span>
          </template>
        </van-cell>
        <van-cell title="银行卡" is-link @click="addCount(3)">
          <template #title>
            <img class="add-icon" src="/mobile/img/icon_3.png" width="34px" height="34px" alt="">
            <span class="custom-title">银行卡</span>
          </template>
        </van-cell>
      </div>
    </van-popup>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      loading: false,
      finished: false,
      token: '',
      list: [],
      page: 1,
      limit: 50,
      selectedIndex: -1,
      showDialog: false,
      type: 1,
      account: '',
      name: '',
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      
      var data = parse(location.search)
      window.addEventListener('pageshow', () => {
        if (data.token) {
          this.token = data.token
          this.initData()
        }
      })
    },
    methods: {
      getData() {
        var loading = this.$toast.loading()
        request.post('/api/pay/finance/userCashAccount/listParameters', {
          limit: this.limit,
          page: this.page
        }).then(res => {
          console.log(res)
          this.list = res.data.list
        }).finally(() => {
          loading.clear()
        })
      },
      initData() {
        this.page = 1
        this.list = []
        this.getData()
        this.selectedIndex = Number(sessionStorage.getItem('selectedIndex'))
      },
      delAccount(item, index) {
        console.log(item)
        this.$dialog.alert({
          message: '确定删除提现账户' + item.account + '吗?',
          showCancelButton: true,
        }).then(res => {
          console.log(res)
          var query = `id=${item.id}`
          var str = ISCRYPT ? `args=${encrypt(query)}` : query
          request.get(`/api/pay/finance/userCashAccount/del?${str}`).then(res => {
            console.log(res)
            this.$toast('删除成功')
            sessionStorage.removeItem('selectedIndex')
            if (this.selectedIndex === index) {
              sessionStorage.removeItem('account')
            }
            this.initData()
          })
          
        }).catch(e => {
          console.log(e)
        })
      },
      selectAccount (item, index) {
        if (item.type === 1) {
          this.$toast('暂不支持支付宝提现，请选择银行卡')
          return
        }
        this.$toast.loading({
          forbidClick: true,
          duration: 500,
          onClose () {
            sessionStorage.setItem('account', JSON.stringify(item))
            sessionStorage.setItem('selectedIndex', index)
            history.back()
          }
        })
      },
      addCount (type) {
        location.href = `./account-add.html?type=${type}&token=${this.token}`
        this.showDialog = false
      }
    },
  })
  </script>
</body>

</html>